<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PPTX Exporter - 浏览器示例</title>
    <style>
      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
      }

      .container {
        background: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      h1 {
        color: #333;
        text-align: center;
        margin-bottom: 30px;
      }

      .section {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #f9f9f9;
      }

      .section h3 {
        margin-top: 0;
        color: #555;
      }

      button {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        margin: 5px;
        transition: transform 0.2s;
      }

      button:hover {
        transform: translateY(-2px);
      }

      button:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
      }

      .status {
        margin: 10px 0;
        padding: 10px;
        border-radius: 4px;
        min-height: 20px;
      }

      .status.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }

      .status.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }

      .status.info {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
      }

      textarea {
        width: 100%;
        height: 200px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
      }

      .example-data {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
      }

      .example-data pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🎯 PPTX Exporter 浏览器示例</h1>

      <div class="section">
        <h3>📊 环境信息</h3>
        <div id="environmentInfo" class="status info">正在检测环境...</div>
      </div>

      <div class="section">
        <h3>📝 演示文稿数据</h3>
        <p>编辑下面的JSON数据来自定义你的演示文稿：</p>
        <textarea id="pptData" placeholder="JSON数据加载中..."></textarea>
      </div>

      <div class="section">
        <h3>🎯 导出操作</h3>
        <button onclick="exportBasic()">📄 基本导出</button>
        <button onclick="exportWithCompression()">🗜️ 压缩导出</button>
        <button onclick="previewInNewTab()">👁️ 新标签页预览</button>
        <button onclick="exportToBase64()">📋 导出为Base64</button>
        <button onclick="exportToArrayBuffer()">🔢 导出为ArrayBuffer</button>
        <button onclick="exportToUint8Array()">📊 导出为Uint8Array</button>

        <div id="exportStatus" class="status"></div>
      </div>

      <div class="section">
        <h3>🧪 测试数据</h3>
        <button onclick="loadBasicExample()">加载基础示例</button>
        <button onclick="loadComplexExample()">加载复杂示例</button>
        <button onclick="loadEmptyExample()">加载空演示文稿</button>
      </div>

      <div class="section">
        <h3>ℹ️ 使用说明</h3>
        <div class="example-data">
          <h4>直接引用方式：</h4>
          <pre>
&lt;script src="./pptx-exporter.umd.js"&gt;&lt;/script&gt;
&lt;script&gt;
  const exporter = new PPTXExporter(pptData);
  exporter.downloadFile('my-presentation.pptx');
&lt;/script&gt;</pre
          >
        </div>
      </div>
    </div>

    <!-- 引入PPTX Exporter -->
    <script src="./pptx-exporter.umd.js"></script>

    <script>
      // 示例数据
      const basicExampleData = {
        title: '我的演示文稿',
        width: 960,
        height: 540,
        theme: {
          backgroundColor: '#ffffff',
        },
        slides: [
          {
            elements: [
              {
                id: 'text-1',
                type: 'text',
                left: 100,
                top: 100,
                width: 760,
                height: 80,
                rotate: 0,
                content:
                  '<div style="font-size: 32px; font-weight: bold; color: #333333; text-align: center;">欢迎使用 PPTX Exporter</div>',
                defaultFontName: '微软雅黑',
                defaultColor: '#333333',
              },
              {
                id: 'text-2',
                type: 'text',
                left: 100,
                top: 200,
                width: 760,
                height: 40,
                rotate: 0,
                content:
                  '<div style="font-size: 18px; color: #666666; text-align: center;">这是在浏览器中生成的PowerPoint演示文稿</div>',
                defaultFontName: '微软雅黑',
                defaultColor: '#666666',
              },
            ],
          },
        ],
      };

      // 复杂示例数据 - 从template.json加载
      let complexExampleData = null;

      async function loadTemplateData() {
        try {
          const response = await fetch('./examples/template.json');
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          complexExampleData = await response.json();
          console.log('✅ 成功加载template.json数据');
        } catch (error) {
          console.error('❌ 加载template.json失败:', error);
          // 如果加载失败，使用备用数据
          complexExampleData = {
            title: '复杂演示文稿示例（备用）',
            width: 960,
            height: 540,
            theme: {
              backgroundColor: '#f0f8ff',
            },
            slides: [
              {
                elements: [
                  {
                    id: 'text-3',
                    type: 'text',
                    left: 50,
                    top: 50,
                    width: 860,
                    height: 100,
                    rotate: 0,
                    content:
                      '<div style="font-size: 36px; font-weight: bold; color: #2c3e50; text-align: center;">第一页 - 标题页</div>',
                    defaultFontName: '微软雅黑',
                    defaultColor: '#2c3e50',
                  },
                  {
                    id: 'shape-1',
                    type: 'shape',
                    left: 100,
                    top: 200,
                    width: 760,
                    height: 200,
                    rotate: 0,
                    viewBox: [760, 200],
                    path: 'M 0 0 L 760 0 L 760 200 L 0 200 Z',
                    fixedRatio: false,
                    fill: '#3498db',
                    outline: {
                      style: 'solid',
                      width: 2,
                      color: '#2980b9',
                    },
                  },
                ],
              },
            ],
          };
        }
      }

      const emptyExampleData = {
        title: '空演示文稿',
        width: 960,
        height: 540,
        theme: {
          backgroundColor: '#ffffff',
        },
        slides: [],
      };

      // 初始化
      async function init() {
        // 检测环境
        checkEnvironment();

        // 预加载复杂示例数据
        await loadTemplateData();

        // 加载默认数据
        loadBasicExample();
      }

      function checkEnvironment() {
        const envInfo = document.getElementById('environmentInfo');

        if (typeof PPTXExporter !== 'undefined') {
          const exporter = new PPTXExporter(basicExampleData);
          envInfo.innerHTML = `
                    ✅ PPTX Exporter 已加载<br>
                    🌍 当前环境: ${exporter.getEnvironment()}<br>
                    📋 支持的格式: ${exporter.getSupportedFormats().join(', ')}<br>
                    📦 版本: ${PPTXExporter.version || '1.0.0'}
                `;
          envInfo.className = 'status success';
        } else {
          envInfo.innerHTML = '❌ PPTX Exporter 未加载';
          envInfo.className = 'status error';
        }
      }

      function loadBasicExample() {
        document.getElementById('pptData').value = JSON.stringify(
          basicExampleData,
          null,
          2
        );
      }

      async function loadComplexExample() {
        if (!complexExampleData) {
          await loadTemplateData();
        }
        document.getElementById('pptData').value = JSON.stringify(
          complexExampleData,
          null,
          2
        );
      }

      function loadEmptyExample() {
        document.getElementById('pptData').value = JSON.stringify(
          emptyExampleData,
          null,
          2
        );
      }

      function getPPTData() {
        try {
          const data = JSON.parse(document.getElementById('pptData').value);
          return data;
        } catch (error) {
          showStatus('❌ JSON数据格式错误: ' + error.message, 'error');
          throw error;
        }
      }

      function showStatus(message, type = 'info') {
        const status = document.getElementById('exportStatus');
        status.innerHTML = message;
        status.className = `status ${type}`;
      }

      async function exportBasic() {
        try {
          showStatus('📤 正在导出...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          await exporter.downloadFile('basic-presentation.pptx');
          showStatus('✅ 基本导出完成！文件已下载。', 'success');
        } catch (error) {
          showStatus('❌ 导出失败: ' + error.message, 'error');
        }
      }

      async function exportWithCompression() {
        try {
          showStatus('📤 正在压缩导出...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          await exporter.downloadFile('compressed-presentation.pptx', true);
          showStatus('✅ 压缩导出完成！文件已下载。', 'success');
        } catch (error) {
          showStatus('❌ 压缩导出失败: ' + error.message, 'error');
        }
      }

      async function previewInNewTab() {
        try {
          showStatus('👁️ 正在生成预览...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          await exporter.openInNewTab();
          showStatus('✅ 预览已在新标签页打开！', 'success');
        } catch (error) {
          showStatus('❌ 预览失败: ' + error.message, 'error');
        }
      }

      async function exportToBase64() {
        try {
          showStatus('📋 正在导出为Base64...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          const base64 = await exporter.toBase64();
          console.log('Base64 数据:', base64.substring(0, 100) + '...');
          showStatus(
            `✅ Base64导出完成！数据长度: ${base64.length} 字符（已输出到控制台）`,
            'success'
          );
        } catch (error) {
          showStatus('❌ Base64导出失败: ' + error.message, 'error');
        }
      }

      async function exportToArrayBuffer() {
        try {
          showStatus('🔢 正在导出为ArrayBuffer...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          const arrayBuffer = await exporter.toArrayBuffer();
          console.log('ArrayBuffer 数据:', arrayBuffer);
          showStatus(
            `✅ ArrayBuffer导出完成！大小: ${arrayBuffer.byteLength} 字节（已输出到控制台）`,
            'success'
          );
        } catch (error) {
          showStatus('❌ ArrayBuffer导出失败: ' + error.message, 'error');
        }
      }

      async function exportToUint8Array() {
        try {
          showStatus('📊 正在导出为Uint8Array...', 'info');
          const pptData = getPPTData();
          const exporter = new PPTXExporter(pptData);

          const uint8Array = await exporter.toUint8Array();
          console.log('Uint8Array 数据:', uint8Array);
          showStatus(
            `✅ Uint8Array导出完成！长度: ${uint8Array.length} 字节（已输出到控制台）`,
            'success'
          );
        } catch (error) {
          showStatus('❌ Uint8Array导出失败: ' + error.message, 'error');
        }
      }

      // 页面加载完成后初始化
      document.addEventListener('DOMContentLoaded', init);
    </script>
  </body>
</html>
